let path = require('path');
var HtmlWebpackPlugin = require("html-webpack-plugin");
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
//vue2版本
// const VueLoaderPlugin = require('vue-loader/lib/plugin');
//vue3版本
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
    //设置打包模式，production 生产模式，简化不需要的代码;development 开发模式，尽量全面的打包模式
    mode: "production",

    //入口
    // entry: "./src/index.js",//用来指定打包时的主文件，默认为./src/index.js
    // entry: {
    //     index: './src/index.js',
    //     main: './src/main.js',
    // },
    entry: ['./src/index.js', './src/main.js'], //将所有数组内的文件打包在一起，作为主文件
    //entry:{key1:"value1",key2:"value2"} key:符合路径名规则的字符串，value:相对或绝对路径，用于分别打包对象内每一个属性指向的文件

    //出口：配置代码打包后放置的位置
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name][hash:8].js"//打包后的文件名,[name]表示文件名name与key相同，[hash:8]表示后面附带8位随机字符以区分每次打包的版本
    },
    plugins: [//用于移动，合并，编写的插件
        new HtmlWebpackPlugin({
            title: "webpack",//可有可无，配合<%= htmlWebpackPlugin.options.title %>使用修改index.html的title内容
            template: "public/index.html",//控制合并到哪个文件
            chunks: ['main', 'index']//控制合并哪些文件
        }),
        new MiniCssExtractPlugin({
            filename: '[name].[hash].css'
        }),
        new VueLoaderPlugin()
    ],
    module: {//用于配置与文件转译有关的项目
        rules: [{
            test: /\.css$/i, //编译以.css结尾的文件
            use: [MiniCssExtractPlugin.loader, 'css-loader']//使用时会由后向前调用，需要按顺序配置
        },
        {
            test: /\.s[ac]ss$/i,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'sass-loader',
            ],//顺序是固定的，由后向前调用转译
        },
        {
            test: /\.vue$/,
            use: ["vue-loader"]
        }
        ]
    },
    //vue2版本需求，vue3不用
    // resolve: {
    //     // 当安装vue时，默认使用的是runtime-only版本，此版本只含有vue运行的代码，不包含编译template的代码
    //     // 需要重新更换含有runtime-compiler的版本，因为runtime-complier含有complier代码可以用于编译template
    //     // alias（别名）: 用别名代替前面的路径，不是省略，而是用别名代替前面的长路径
    //     // 如下，当main.js中import Vue from "vue"时，因为vue是别名，所以实际为import Vue from "vue/dist/vue.esm.js"
    //     // 别名好处是webpack直接会去别名对应的目录去查找模块，减少了webpack自己去按目录查找模块的时间
    //     alias: {
    //         'vue$': 'vue/dist/vue.esm.js'
    //     }
    // }
} 